<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
    <head>
        <title>Test zipLookup</title>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" ></script>
        <script src="ziplookup/zipLookup.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {                                  // When the document loads,

                $.zipLookupSettings.libDirPath = 'ziplookup/'               // (Optionally) set the library folder path manually

                $('[name=zipcode]').blur(function(){                        // Set on blur
                    $.zipLookup(                                            // Do a Zip code Lookup
                        $(this).val(),                                      // Zip code Field Value
                        function(cityName, stateName, stateShortName){      // If Successful,
                            $('input[name=city]').val(cityName);            // Set City name
                            $('input[name=state_short]').val(stateName);    // Set State abbreviation
                            $('input[name=state]').val(stateShortName);     // Set State name
                            $('.message').html("Found Zipcode");            // Add a message
                        },
                        function(errMsg){                                   // If Zip couldn't be found,
                            $('.message').html("Error: " + errMsg);         // Add an error message
                        });
                });
            });
        </script>
    </head>
    <body>
        <form>
            <table>
                <tbody>
                <tr>
                    <td>Enter ZipCode:</td>
                    <td><input type='text' name='zipcode' /></td>
                </tr>
                <tr>
                    <td>Enter City:</td>
                    <td><input type='text' name='city' /></td>
                </tr>
                <tr>
                    <td>Enter State Abbr.:</td>
                    <td><input type='text' name='state_short' /></td>
                </tr>
                <tr>
                    <td>Enter State:</td>
                    <td><input type='text' name='state' /></td>
                </tr>
                <tr>
                    <td class='message' colspan="2"></td>
                </tr>
                </tbody>
            </table>
        </form>
    </body>
</html>